<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
   <title>股市舆情可视化</title>
   <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="../static/js/StockVisual/echarts.js"></script>
   <!-- Wordcloud.js -->
   <script src="http://data-visual.cn/datav/src/js/echarts/extension/echarts-wordcloud.min.js"></script>
   <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">
                        <span class="glyphicon glyphicon-home" aria-hidden="true"></span> 股市舆情可视化 <span class="label label-default">Alpha</span>
                    </a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                    <li><a href="/"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 历史交易行情</a></li>
                    <li class="active"><a href="/wordcloud"><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> 股票舆情云图</a></li>
                    <li><a href="/dicopinion"><span class="glyphicon glyphicon-stats" aria-hidden="true"></span> 情感字典舆情统计</a></li>
                    <li><a href="/nbopinion"><span class="glyphicon glyphicon-equalizer" aria-hidden="true"></span> 机器学习舆情预测</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

    <div class="container">
    <div class="panel panel-info">
      <div class="panel-heading">股票词云</div>
      <div class="panel-body">
                   <div class="col-md-12 col-xs-12">
                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div id="main" style="width:100%;height:400px;"></div>
                </div>
      </div>
    </div>
    </div>
        <div class="container">
        <div class="col-md-12 col-xs-12">
            <a href="/" class="btn btn-default btn-block" role="button">返回首页</a>
        </div>
    </div>

 <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        // 基于准备好的dom，初始化echarts实例
    var option = {
    title:{
        text:"小米",
        link:'https://github.com/ecomfe/echarts-wordcloud',
        subtext: '近期热点词汇',
        sublink:'http://data-visual.cn',
    },
    tooltip: {},
    series: [{
        type: 'wordCloud',
        gridSize: 20,
        sizeRange: [12, 50],
        rotationRange: [0, 0],
        shape: 'circle',
        textStyle: {
            normal: {
                color: function() {
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        data: [{
            name: '小米',
            value: 10000,
            textStyle: {
                normal: {
                    color: 'black'
                },
                emphasis: {
                    color: 'red'
                }
            }
        }, {
            name: '富士康',
            value: 6181
        }, {
            name: 'CDR',
            value: 4386
        }, {
            name: '赴港',
            value: 4055
        }, {
            name: '上市',
            value: 2467
        }, {
            name: '过会',
            value: 2244
        }, {
            name: '康德',
            value: 1898
        }, {
            name: 'IPO',
            value: 1484
        }, {
            name: '爱奇艺',
            value: 1112
        }]
    }]
};
        myChart.setOption(option);
        window.onresize = function () {
            myChart.resize(); //使第一个图表适应
        }
    </script>

    
</body>
</html>
